<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./axios.js"></script>
    <title>失败重连</title>
  </head>
  <body>
    <script>
      function getApi(params) {
        return axios.request({
          url: "http://sims.cuilb.cn/data.json",
          method: "GET",
          params,
        });
      }
      async function getRequest() {
        const res = await reduceRequest(getApi)({ code: 200 }, 100, 1000);
        console.log(res.data);
      }
      getRequest();

      function reduceRequest(promsieThenable) {
        return function (params, retryCount = 100, retryDelay = 1000) {
          return new Promise((resolve, reject) => {
            // promsieThenable : 请求的原始方法 : 调用很多初次
            // 无限次的请求 : setInterval 定时器 递归
            // 定时器

            return function executePromise() {
              // 无限次的请求 : setInterval 定时器
              if (retryCount <= 0) {
                // 清除定时器
                clearInterval(timer);
                // 彻彻底底的失败了
                reject("请求失败");
                return Promise.reject("请求失败");
              }
              // 请求一次少一次
              retryCount -= 1;
              return promsieThenable(params)
                .then((res) => {
                  clearInterval(timer);
                  // 请求成功了
                  resolve(res);
                })
                .catch((err) => {
                  // 如果失败了
                  // executePromise() // 1秒  2次 2秒 2次
                  // 1. reject 2. executePromise 3. 什么也不做 4. 抛出一个错误
                  throw new Error("第" + (100 - retryCount) + "次请求失败");
                });
            }

            const timer = setInterval(() => {
              executePromise();
            }, retryDelay);
            executePromise();
          });
        };
      }
    </script>
  </body>
</html>
